<template>
    <div>
        <el-row id="sysName">
            <span>
                <!-- <svg-icon name="cms"></svg-icon> -->
                <span class="iconfont icon-qianbao"></span>
            </span>
            <span v-if="!foldState">
                成本管理系统
            </span>
        </el-row>
        <!-- 保持仅一个子菜单打开 -->
        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="foldState" :unique-opened="true" mode="vertical" @select="selectMenu" background-color="#304156">
            <el-menu-item index="8">
                <i class="el-icon-trophy"></i>
                <span slot="title">事务汇总查询</span>
            </el-menu-item>
            <el-menu-item index="6">
                <i class="el-icon-s-custom"></i>
                <span slot="title">账户明细查询</span>
            </el-menu-item>
            <!-- <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">采购接收与退回</span>
                </template>
<el-menu-item-group> -->
            <!-- <span slot="title">分组一</span> -->
            <!-- <el-menu-item index="1-1">明细查询</el-menu-item>
                </el-menu-item-group>
            </el-submenu> -->
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">物料成本</span>
                </template>
                <el-menu-item-group>
                    <!-- <span slot="title">分组一</span> -->
                    <el-menu-item index="2-1">成本维护</el-menu-item>
                    <el-menu-item index="2-2">成本操作记录</el-menu-item>
                    <el-menu-item index="2-6">成本类型设置</el-menu-item>
                    <el-menu-item index="2-3">成本累计</el-menu-item>
                    <el-menu-item index="2-4">成本更新</el-menu-item>
                    <el-menu-item index="2-5">物料查询</el-menu-item>

                </el-menu-item-group>
            </el-submenu>

            <!-- <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-document"></i>
                    <span slot="title">账户出入库</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">明细查询</el-menu-item>
                </el-menu-item-group>
            </el-submenu> -->

            <!-- <el-menu-item index="4">
                <i class="el-icon-s-shop"></i>
                <span slot="title">工单完工及投料</span>
            </el-menu-item>
            <el-menu-item index="5">
                <i class="el-icon-document-checked"></i>
                <span slot="title">盘点查询</span>
            </el-menu-item> -->

            <el-submenu index="7" v-if="adminRole">
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span slot="title">系统管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="7-1">字典设置</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="7-2">用户管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="7-3">角色管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="7-4">菜单管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                    <el-menu-item index="7-5">部门管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <!-- <AnimationMenu /> -->
        </el-menu>
    </div>
</template>
    <script lang="ts" setup>
    import { useRoute, useRouter } from 'vue-router/composables';
    import { onMounted, ref } from 'vue'
    import { useMenuStore } from '@/stores/menu';
    import { storeToRefs } from 'pinia';
    import { getSideRoutePath } from './data';
    // import AnimationMenu from './menu/AnimationMenu.vue'

    const adminRole = ref(false)
    const menuStore = useMenuStore()
    const handleOpen = (key: string, keyPath: Array<string>) => {
        console.log(key, keyPath);
    }
    const handleClose = (key: string, keyPath: Array<string>) => {
        console.log(key, keyPath);
    }
    const sideRoute: Record<string, string> = getSideRoutePath()
    const $router = useRouter()
    const $route = useRoute()
    const selectMenu = (key: string, keyPath: Array<string>) => {
        console.log('菜单', keyPath)
        const route = sideRoute[key]
        $router.push(route)
    }
    const { foldState } = storeToRefs(menuStore)
    const defaultActive = ref('6')
    const juadgeAdminRole = () => {
        adminRole.value = true
        // adminRole.value = import.meta.env.MODE === "development" ? true : false
    }
    onMounted(() => {
        // console.log('store', foldState.value, 'route', $route, sideRoute)
        // todo 后面把对应关系放到route表的meta里面去
        if ($route.fullPath.includes('/sysAdmin/dictTypeDetail')) {
            defaultActive.value = '7-1'
        } else {
            // 刷新时要跟当前路由对应
            Object.keys(sideRoute).forEach((item: string) => {
                if (sideRoute[item] == $route.fullPath) {
                    defaultActive.value = item
                }
            })
        }
        // 判断是否是管理员
        juadgeAdminRole()
    })
</script>

    <style lang="scss" scoped>
    #sysName {
        height: 80px;
        line-height: 80px;
        font-size: 20px;
        font-weight: 800;
        border-bottom: 3px solid $border-white;
        // max-width: 200px;
        padding-left: 20px;

        .icon-qianbao {
            color: $golden1;
        }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        // width: 200px;
        // min-height: 400px;
    }
</style>